<template>
	<view class="content">
		<u-swiper class="swiper" :list="swiper_list"></u-swiper>
		<view class="box">
			<view class="temple">
				<view class="temple-left">
					<view class="temple-title">
						{{templeInfo.name}}
					</view>
					<view class="temple-position">
						<view class="img">
							<text class="icon-position iconfont" style="font-size: 32rpx;"></text>
						</view>
						<view class="text">
							{{templeInfo.address}}
						</view>
					</view>
				</view>
				<view class="temple-right" @click="goThis">
					<view class="temple-img">
						<u-image width="50rpx" height="50rpx" src="/static/img/temple_go.png"></u-image>
					</view>
					<view class="temple-text">
						到这去
					</view>
				</view>
			</view>
			<view class="lamp">
				<view class="lamp-item" v-for="(item,index) in lampList">
					<view class="lamp-left" @click="setCheck(item.lamp_id)">
						<view class="check" v-show="!checkArr.includes(item.lamp_id)">
							<u--image :showLoading="true" src="/static/img/check.png" width="40rpx"
								height="40rpx"></u--image>
						</view>
						<view class="check active" v-show="checkArr.includes(item.lamp_id)">
							<u--image :showLoading="true" src="/static/img/check_active.png" width="40rpx"
								height="40rpx"></u--image>
						</view>
					</view>
					<view class="lamp-right">
						<view class="lamp-title">
							{{item.lamp_device_no}}（{{index+1}}号莲花灯）
						</view>
						<view class="lamp-state">
							<view>
								{{item.lamp_status==1?"可买":'不可买'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pray" @click="submitOK">
			去
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper_list: [],
				check: false,
				templeInfo: {},
				paging: {
					page: 1,
					limit: 10,
					id: ''
				},
				total: null,
				lampList: [],
				checkArr: []
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getTempleInfo()
			this.getlamplist()
		},
		onReachBottom() {
			this.getlamplist()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			goThis() {
				uni.openLocation({
					latitude: parseFloat(this.templeInfo.lat),
					longitude: parseFloat(this.templeInfo.lng),
					address: this.templeInfo.address,
					name: this.templeInfo.name,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			getTempleInfo() {
				this.$api.templeInfo({
					id: this.id
				}).then(res => {
					this.templeInfo = res.data
					this.swiper_list = res.data.image_list.map(item => item.img_url)
				})
			},
			getlamplist() {
				if (this.lampList.length == this.total) return
				this.$api.getlamplist(this.paging).then(res => {
					this.lampList = res.data.list
					this.total = res.data.total
					this.paging.page++
				})
			},
			// 刷新列表
			refresh() {
				this.paging.page = 1
				this.total = null
				this.lampList = []
				this.getlamplist()
			},
			setCheck(id) {
				if (this.checkArr.includes(id)) {
					this.checkArr.splice(this.checkArr.indexOf(id), 1)
				} else {
					this.checkArr.push(id)
				}
			},
			submitOK() {
				console.log(this.checkArr);
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		// position: relative;
		background: url('@/static/img/bg.png');
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
			transform: translateY(-40rpx);

			.temple {
				background: #FEF1DC;
				border-radius: 20rpx;
				padding: 48rpx 30rpx;
				display: flex;
				justify-content: space-between;

				.temple-left {
					.temple-title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 34rpx;
						color: #111111;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}

					.temple-position {
						display: flex;
						padding-top: 10rpx;

						.text {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #AAAAAA;
							line-height: 50rpx;
							text-align: left;
							font-style: normal;
						}

						.img {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.temple-right {
					.temple-img {
						display: flex;
						justify-content: center;
					}

					.temple-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #D06122;
						line-height: 34rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}

			.lamp {
				margin-top: 16rpx;
				background: #FEF1DC;
				border-radius: 20rpx;
				padding: 15rpx 30rpx;
				padding-bottom: 130rpx;

				.lamp-item {
					display: flex;
					padding: 38rpx 0;
					border-bottom: 2rpx solid #cccccc;

					.lamp-left {
						margin-top: 20rpx;
					}

					.lamp-right {
						padding-left: 28rpx;

						.lamp-title {
							padding-bottom: 12rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 34rpx;
							color: #111111;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
						}

						.lamp-state {
							view {
								width: 90rpx;
								height: 38rpx;
								background: #C3EDEF;
								border-radius: 18rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #008583;
								line-height: 38rpx;
								text-align: center;
								font-style: normal;
							}
						}
					}
				}
			}
		}
	}

	.pray {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 630rpx;
		height: 84rpx;
		background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
		border-radius: 42rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}
</style>